<template class="index_background">
  <div>
    <el-collapse>
      <div class="divcss5" style="border-bottom:3px solid #eee">
      <h5 align="left">我的简历>本地简历</h5>
      <!--<el-button align='right' type="add">添加简历</el-button>-->

      <el-row>
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        style="float: right;"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button type="primary" style="float: right;margin-right: 100px;">添加简历</el-button>
      </el-upload>
      </el-row>

      </div>
        <el-table :data="tableData">
        <el-table-column prop="CVname" label="简历名称" width="300" align="center">
        </el-table-column>
        <el-table-column prop="time" label="上传时间" width="300" align="center">
        </el-table-column>
       <el-table-column label="操作" width="300" align="center">
      <template slot-scope="scope" >
        <el-button
          size="mini"
          @click="handleLook(scope.$index, scope.row)">查看</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    </el-collapse>
  </div>
</template>

<style>
.divcss5{
  margin:30px 0;
  color: rgb(144,144,144);
  height: 100px;
}
.index_background{
   background:white;
   }
  .lable{
    color: rgb(144,144,144);
    margin-top:30px;
    margin-bottom:30px;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      //const item = {
      //  CVname: '本地简历',
      //  date: '2020-06-20 21:40'
      //};
      //return {
      //  tableData: Array(10).fill(item)
      //};
      // eslint-disable-next-line no-labels
      return {
        tableData: [{
            CVname: '本地简历1',
            time: '2020-06-02 15:33',
          }, {
            CVname: '本地简历2',
            time: '2020-06-16 09:12',
          }, {
            CVname: '本地简历3',
            time: '2020-06-24 17:22',
          }, {
            CVname: '本地简历4',
            time: '2020-07-08 09:06',
          }]
      }
    },
     methods: {
      handleLook(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    }
  }
</script>